<script>
import BpmnModeler  from 'bpmn-js/lib/Modeler'
import testBpmn from '@/assets/source/test.bpmn'
import customTranslate from '@/i18n/customeTranslate/customTranslate';
import {
  BpmnPropertiesPanelModule,
  BpmnPropertiesProviderModule
} from 'bpmn-js-properties-panel';
let customTranslateModule = {
  translate: ['value', customTranslate]
};
export default {
  name: 'menu1',
  data() {
    return {
      bpmnViewer: null,
      bpmnModeler: null
    }
  },
  mounted() {
    // this.bpmnViewer = new BpmnViewer({
    //   container: '#menu'
    // })
    // this.bpmnViewer.importXML('yx',error => {
    //   if (error) {
    //     console.log(error)
    //   }
    // })
    this.bpmnModeler = new BpmnModeler({
      container: '#diagrame-panel',
      keyboard: {
        bindTo: window
      },
      additionalModules: [
        customTranslateModule,
        BpmnPropertiesPanelModule,
        BpmnPropertiesProviderModule
      ],
      propertiesPanel: { //指定面板容器
        parent: '#properties-panel'
      }
    })
    this.bpmnModeler.importXML(testBpmn).then(()=>{
      console.log("加载成功")
    }).catch(err=>{
      console.log("加载失败",err)
    });

  }
}
</script>

<template>
  <div class="menu-container">
    <div id="diagrame-panel"></div>
    <div id="properties-panel"></div>
  </div>
</template>

<style scoped>
.menu-container {
  position: relative;
  height: calc(100% - 31px);
}
</style>